<template>
    <div class="app-container">
        <div class="mycontent">
            <el-row type="flex" class="mytitle">
              <h1>标签云</h1>
            </el-row>
            <el-row :gutter="30">
                
                <el-col :span="6" v-for="item in bqlist" :key="item.labelId">
                    <el-card shadow="hover" class="tab">
                        <el-row type="flex" class="mycenter">
                            <el-col> <el-button type="info" plain @click="toClassRetrieval(item)">{{ item.labelName }}</el-button>
                                <span class="small preserve-spaces">
                                    ×{{ item.articleOrders }}
                                </span>
                            </el-col>
                        </el-row>
                        <br/>
                        <el-row class="small myhover a">
                            <div @click="addclicknum(item)">{{ item.title }}</div>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
            
        </div>
        <el-row type="flex" style=" justify-content: center;">
          <el-col :span="6">
            <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            :pageSizes="queryParams.pageSizes"
            @pagination="getList"
            />
          </el-col>
        </el-row>
        <div class="footer">
            <p>版权所有 &copy; 2023 示例公司</p>  
            <p>联系我们: <a href="#">example@example.com</a></p>  
            <p><a href="#">网站地图</a></p>  
        </div>
    </div>
</template>
<script>
import {labellist} from "@/api/system/label";
import { updateArticle } from "@/api/system/article";

export default {
  name: "bb",
  data() {
    return {
      activeFont:'点赞',
      isActive:false,
      total:0,
      bqlist: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 16,
        labelName: null,
        pageSizes: [16,20,24]
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询共享资源列表 */
    getList() {
        this.loading = true;
        labellist(this.queryParams).then(response=>{
          this.bqlist = response.rows;
          this.total = response.total;
          this.loading = false;
        })
    },
    addclicknum(item){
      console.log("触发了");
      item.clicknum++;
      updateArticle(item);
      this.$router.push({name:'content',params:{articleid:item.articleId}});
    },
    toClassRetrieval(item){
      this.$router.push({name:'tagpage',params:{tag:item.labelName}});
    }
  }
};
</script>
<style scoped>
.tab{
    height: 15vh;
}
.preserve-spaces {  
  margin-left: 10px
}  
.footer {  
        margin-top: 80px;
        background-color: #333;  
        color: #fff;  
        padding: 20px;  
        text-align: center;  
        width: 100%;  
        }  
.el-col{
  margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
}
.myhover:hover{
  color: black;
}
.small{
  margin-right: 20px;
  font-size: 14px;
  color: #999999;
}
.mycenter{
  margin-bottom: 10px;
  align-items: center; /* 如果需要垂直居中 */  
}
.mytitle{
  justify-content: center;
  align-items: center; /* 如果需要垂直居中 */  
  font-weight: bold;
  color: #666;
}
.mycontent{
    margin: 0px 80px;
}
.a:hover{
  cursor: pointer;
}
</style>